<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            li a {
                float: right;
            }

            * {
                margin: 0;
                padding: 0;
            }

            body {
                padding: 100px;
            }

            textarea {
                width: 200px;
                height: 100px;
                border: 1px solid pink;
                outline: none;
                resize: none;
            }

            ul {
                margin-top: 50px;
            }

            li {
                width: 300px;
                padding: 5px;
                background-color: rgb(245, 209, 243);
                color: red;
                font-size: 14px;
                margin: 15px 0;
            }
        </style>
    </head>
    <body>
        <textarea name="" id=""></textarea>
        <button type="button">发布</button>
        <ul>

        </ul>
        <script type="text/javascript">
            var btn = document.querySelector('button');
            var text = document.querySelector('textarea');
            var ul = document.querySelector('ul');
            btn.onclick = function() {
                if (text.value == '') {
                    alert('请输入内容再发布');
                } else {
                    var li = document.createElement('li'); //创建
                    li.innerHTML = text.value + "<a href='javascript:;'>删除</a>"; //有了才能给值
                    ul.insertBefore(li, ul.firstChild); //添加
                    var as = document.querySelectorAll('a');
                    for (var i = 0; i < as.length; i++) {
                        as[i].onclick = function() {
                            ul.removeChild(this.parentNode);
                        }
                    }
                }
            }
        </script>
    </body>
</html>
